<template>
    <div class="product">
        <h2>这是商品组件</h2>
        <h3>{{queryV}}</h3>

    </div>
</template>

<script>
    export default {
        name: "Product",
        data: function () {
            return {
                proName: "",
                pPrice: "",
                msg:"哈哈哈哈哈或"
            }
        },
        created() {
            this.proName=this.$route.query.proName,
                this.pPrice=this.$route.query.proPrice
        },
        computed:{
            queryV(){
                return `商品的名字是:${this.$route.query.proName},商品的价格是:${this.$route.query.proPrice}`
            }
        },
        //组件内部的路由守卫
        beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            console.log(this);
            next(vm=>{
                console.log(vm.msg)
            });

        },
        beforeRouteUpdate (to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
            console.log(this.msg);
            next();
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            console.log(this.msg);
            next();
        }
    }
</script>

<style scoped>
    .product {
        width: 100%;
        height: 69%;
        background-color: cadetblue;
    }

</style>